<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04.canvasApi矩形绘制</title>
</head>
<body>
<canvas id="canvas">

</canvas>

<script>
    window.onload = function () {
        console.log('onload');
        //获取canvas节点对象
        var canvasRef = document.querySelector('canvas');

        canvasRef.width = 600;
        canvasRef.height = 600;
        canvasRef.style.border = '1px solid #000'
        //获取canvas上下文对象
        var ctx = canvasRef.getContext('2d');
        //canvas Api rect:(x,y,width,height)绘制矩形
        // ctx.moveTo(100,100);
        ctx.rect(100,100,40,40)
        ctx.stroke();

        //canvas Api strokeRect == rect + strock //自动绘制矩形
        ctx.strokeRect(200,200,100,100);

        //canvas Api fillRect 填充矩形
        ctx.fillRect(300,300,70,70);
    }
</script>
</body>
</html>
